import { register } from 'utils/auth-provider'
import React, { FormEvent } from 'react'

// interface Base {
//   id:number
// }
// interface Advance extends Base {
//   name:string
// }

// const test = (p:Base)=>{}
// // 鸭子类型（duck typing）：面向接口编程，而不是面向对象编程
// const a = {id:1,name:"jack"}
// test(a)
const apiUrl = process.env.REACT_APP_API_URL

export default function Register() {

  const login = (param:{username:string,password:string} )=>{
    fetch(`${apiUrl}/register`,{
      method:'POST',
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify(param)
    }).then(
     async (response:Response) => {
      if(response.ok){
        
      }
     }
    )
  }
  // HTMLFormElement extends Element
  const handleSubmit = (event:FormEvent<HTMLFormElement>) =>{
    //阻止表单提交默认行为
    event.preventDefault()
    const username = (event.currentTarget[0] as HTMLInputElement).value
    const password = (event.currentTarget[1] as HTMLInputElement).value
    register({username,password})
  }


  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor='username'>用户名</label>
          <input type="text" id={'username'} />
        </div>
        <div>
          <label htmlFor="password">密码</label>
          <input type="text" id='password' />
        </div>
        <button type='submit'>注册</button>
      </form>
    </div>
  )
}
